<template>
	<view>
		<view class="p-30">
			<u--form labelPosition="top" labelWidth="auto" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="纠纷类别" prop="category" @click="showCategory = true;" ref="category">
					<u--input :value="categoryName" border="surround" disabled disabledColor="#ffffff"
						placeholder="请选择类别">
						<template slot="suffix">
							<u-icon slot="right" name="arrow-right"></u-icon>
						</template>
					</u--input>
				</u-form-item>
				<u-form-item label="诉求描述" prop="description" ref="description">
					<u--textarea v-model="form.description" placeholder="请输入诉求描述"></u--textarea>
				</u-form-item>

				<u-form-item label="附件" prop="attachments" ref="attachments">
					<view>
						<u-button :customStyle="{width:'80px',margin:0}" type="primary" size="small" text="点击上传"
							@click="uploadDoc"></u-button>
						<view class="files-list mt-20" v-if="form.attachments">
							<view class="files-item " v-for="(item,index) in form.attachments">
								<view class="url line-1">
									<view>{{item}}</view>
								</view>
								<view class="action">
									<u-button type="error" size="mini" text="删"
										@click="deleteAttachments(index)"></u-button>
								</view>
							</view>
						</view>
					</view>
				</u-form-item>
			</u--form>
			<view class="mt-30">
				<u-button color="var(--m-color)" text="提交" @click="submit"></u-button>
			</view>
		</view>
		<u-action-sheet :show="showCategory" :actions="categorys" title="请选择纠纷类别" @close="showCategory = false"
			@select="categorySelect">
		</u-action-sheet>
	</view>
</template>
<script>
	import {
		getCasesParameters,
		addCases,
		uploadFile
	} from '@/config/api';
	export default {
		data() {
			return {
				pageData: {},
				categorys: [],
				categoryName: '',
				showCategory: false,
				form: {
					description: '',
					category: '',
					attachments: [],
				},
				rules: {
					'description': {
						type: 'string',
						required: true,
						message: '请填写诉求描述',
						trigger: ['blur', 'change']
					},
					'category': {
						type: 'string',
						required: true,
						message: '请选择纠纷类别',
						trigger: ['blur', 'change']
					},
					'applicantName': {
						type: 'string',
						required: true,
						message: '请填写申请人姓名',
						trigger: ['blur', 'change']
					},
					'applicantPhone': {
						type: 'string',
						required: true,
						message: '请填写申请人电话',
						trigger: ['blur', 'change']
					},
					'applicantIdNumber': {
						type: 'string',
						required: true,
						message: '请填写申请人身份证号',
						trigger: ['blur', 'change']
					},
					'respondentName': {
						type: 'string',
						required: true,
						message: '请填写被告',
						trigger: ['blur', 'change']
					},
					'respondentPhone': {
						type: 'string',
						required: true,
						message: '请填写被告电话',
						trigger: ['blur', 'change']
					},

				}
			};
		},
		onLoad() {
			getCasesParameters().then(res => {
				this.pageData = res;

				this.categorys = res.disputeCategory.map(item => ({
					name: item.label,
					value: item.value
				}));
			})
		},
		methods: {
			deleteAttachments(index) {
				if (index >= 0 && index < this.form.attachments.length) {
					this.form.attachments.splice(index, 1);
				}
			},
			categorySelect(e) {
				console.log(e);
				this.categoryName = e.name;
				this.form.category = e.value;
				this.$refs.uForm.validateField('category')
			},
			uploadDoc() {
				// #ifdef MP-WEIXIN
				wx.chooseMessageFile({
					count: 1,
					type: 'all',
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						});
						const tempFilePaths = res.tempFiles;
						// 上传文件
						uploadFile({
							filePath: tempFilePaths[0]['path'],
							name: 'file'
						}).then(res1 => {
							this.form.attachments.push(res1.url);
							uni.hideLoading();
						}).catch(ret => {
							uni.showToast({
								title: ret || '操作失败',
								icon: 'none'
							})
							uni.hideLoading();
						})
					},
					fail: (err) => {
						uni.showToast({
							title: err || '操作失败',
							icon: 'none'
						})
						uni.hideLoading();
					},
				})
				// #endif
				// #ifdef WEB
				uni.chooseFile({
					count: 1,
					type: 'all',
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						});

						const tempFilePaths = res.tempFilePaths;
						// 上传文件
						uploadFile({
							filePath: tempFilePaths[0],
							name: 'file'
						}).then(res1 => {
							this.form.attachments.push(res1.url);
							uni.hideLoading();
						}).catch(res => {
							uni.showToast({
								title: ret || '操作失败',
								icon: 'none'
							})
							uni.hideLoading();
						})
					},
					fail: (err) => {
						uni.showToast({
							title: err || '操作失败',
							icon: 'none'
						})
						uni.hideLoading();
					},
				});
				// #endif
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					console.log(res)
					addCases(this.form).then(res1 => {
						uni.showModal({
							title: '提示',
							content: '提交成功！',
							showCancel: false,
							success: res2 => {
								this.form = {
									description: '',
									category: '',
									attachments: [],
								};
								if (res2.confirm) {

									this.navTo('/pages/user/cases/index', {}, 'redirectTo')
								}
							}
						});
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style lang="scss">

</style>